<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示凉菜</title>
	<style>
	*{
		margin:0;
		padding:0;
		list-style:none;
	}
	#root{
		margin:0 auto;
		width:1000px;
		min-height: 700px;  

	}
	#head{
		width:100%;
		height: 100px;
		/* background: green; */
	}
	#head h2{
		font-family: 华文楷体;
		font-size: 30px;
		display: inline;
	}
	#head span{
		font-family: 华文隶书;
		font-size: 20px;
	}
	#head ul li a{
		float: left;
		width:100px;
		text-align: center;
		font-size: 20px;
		text-decoration: none;
		color: black;
	}
	#mid{
		width: 100%;
		min-height: 600px;
		
	}
	#mid h3{
		height:30px;
		border-bottom: 1px solid #ccc;
	}
	#tbl{
		margin: 10 auto;
	}
	#mid img{
		padding: 20px;
		margin: 10px;
	}
	</style>
</head>
<body>
	<div id="root">
		<div id="head">
			<h2>美食天下</h2>
			<span>我所有的朋友都是吃货</span>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">菜谱</a></li>
				<li><a href="#">食材</a></li>
				<li><a href="#">珍选</a></li>
				<li><a href="#">健康</a></li>
				<li><a href="#">专题</a></li>
				<li><a href="#">社区</a></li>
			</ul>
		</div>
		<div id="mid">
			<h3>菜品</h3>
				<%data.forEach(function(item){%>
				<%=item.c_name%>
				<img width="150" src="/images/<%=item.c_img%>" alt="">
				<%})%>
		</div>
</div>

</body>
</html>